<template>
	<view class="order-card flex-between">
		<view class="left">
			<m-image radius="10" types="goods" :src="item.goodspicurl||item.picurl.split(',')[0]"></m-image>
		</view>
		<view class="center flex-column flex-between">
			<view class="title otp2">
				{{item.goodsname}}
			</view>
			<view class="Specification otp2" v-if="item.wards!=1&&item.wards!=3">
				<text>所选规格：{{item.attrname?item.attrname:'默认'}}</text>
			</view>
			<view class="Specification otp2" v-else>
				<text>{{item.sketch}}</text>
			</view>
			<view class="price-box flex-between">
				<view class="price flex">
					<view class="">
						<text class="fs21">￥</text>
						<text class="fs26">{{price[0] | integer(2)}}</text>
					</view>
				</view>
				<view class="fs26" v-if="showStock">
					<text>库存：{{item.stock}}</text>
				</view>
			</view>
			<view class="flex-between">
				<view class="fs24 text-dark-light">
					<template v-if="(item.wards!=1 && item.wards!=3)&&item.yf">
						<text>运费：</text>
						<text>￥{{item.yf}}</text>
					</template>
				</view>

				<view class="amount mt-12" v-if="showCount">
					<uni-number-box v-if="type==1" :disabled="disabled" v-model="item.buycount" :min="1"
						@change="$emit('change')" />
					<uni-number-box v-else :min="1" :disabled="disabled" v-model="item.buycount"
						@change=" e => { addCard(e, item);$emit('change')} " />
				</view>
			</view>
			<view class="flex jc-flex-end" v-if="item.unSela">
				<!-- <text class="fs21 text-red">该地区该商品暂不可售</text> -->
				<text class="fs21 text-red">{{item.unSelaWhy}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { ShopCar_Del, ShopCar_Edit, } from '@/api/Goods.js';
	export default {
		name: "orderCard",
		data() {
			return {
				counts: 0,
			};
		},
		props: {
			type: {
				type: [Number, String],
				default: 1
			},
			showStock: {
				type: Boolean,
				default: true
			},
			disabled: {
				type: Boolean,
				default: false
			},
			showCount: {
				type: Boolean,
				default: true
			},
			item: {
				type: Object,
				default: () => {}

			},
			specification: {
				type: String,
				default: ''
			},
			price: {
				type: [String, Number, Array],
				default: 0
			},
		},
		computed: {},
		mounted() {
			// console.log(this.item)
		},
		methods: {
			// 购物车修改数量
			async addCard(e, item) {
				console.log('item===>', item)
				let data = {
					carid: item.id,
					count: e,
				};
				const res = await ShopCar_Edit(data);
				// this.Toast(res.msg)
				if (!res.success) {
					item.count = item.count - 1;
				}
			},
		}
	}
</script>

<style lang="scss">
	.order-card {
		align-items: flex-start;
		padding: 10rpx 0;

		.left {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.center {
			flex: 1;
			padding-left: 20rpx;

			&>view {
				width: 100%;
				margin-bottom: 15rpx;
			}

			&>view:last-child {
				padding-bottom: 0;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.Specification {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				width: 100%;
			}

			.tag {
				overflow: hidden;

				text {
					display: inline-block;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA2B47;
					border: 1px solid #FA2B47;
					border-radius: 4rpx;
					padding: 0rpx 6rpx;
					margin: 0 12rpx 0 0;
				}
			}

			.price-box {
				view {
					width: unset;
				}

				.price {
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333;
				}

				.amount {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;

				}
			}
		}

		.right {
			align-items: flex-start;
			text-align: right;

		}
	}

	::v-deep .uni-numbox {
		.uni-numbox__minus {
			background: unset !important;

			// background-color: #dbdbdb !important;
			.uni-numbox--text {
				font-weight: bold !important;
			}
		}

		.uni-numbox__plus {
			background: unset !important;

			// background-color: #dbdbdb !important;
			.uni-numbox--text {
				font-weight: bold !important;
			}
		}

		.uni-numbox__value {
			border-radius: 4rpx !important;
			background-color: #dbdbdb !important;

			.uni-input-input {
				font-weight: bold !important;
			}
		}
	}
</style>